<template>
  <div class="discovery">
    <div class="banner-box">
      <el-carousel :interval="4000"
                   type="card"
                   height="1.464129rem">
        <el-carousel-item v-for="(item,index) in banner"
                          :key="index">
          <el-image class="carousel-img"
                    :src="item.imageUrl+'?param=1000y400'"
                    fit="cover"></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <p class="title-wrap">推荐歌单</p>
    <div class="recommend">
      <listwarp v-for="item,index in personalized"
                :key="index"
                :data='item'
                :img='item.picUrl'
                :desc='item.copywriter'
                :title='item.name'></listwarp>
    </div>
    <p class="title-wrap">最新音乐</p>
    <div class="song-list-wrap">
      <sondcard v-for="item,index in newSongList"
                :key="index"
                :data="item"
                :order="index+1"></sondcard>
    </div>
    <p class="title-wrap">推荐MV</p>
    <div class="mv-list-wrap">
      <mvcard v-for="item,index in newMvList"
              :key="index"
              :img='item.picUrl'
              :playCount='item.playCount'
              :duration='item.duration'
              :title="item.name"
              :artistName='item.artistName'></mvcard>
    </div>
  </div>
</template>
<script>

import listwarp from '@/components/listwarp'
import sondcard from '@/components/songcard'
import mvcard from '@/components/mvcard'
import { getBannerImg, getRecommend, getNewSongList, getNewMvList } from '@/network/discovery'
export default {
  components: {
    listwarp, sondcard, mvcard
  },
  data () {
    return {
      banner: [],
      personalized: [],
      newSongList: [],
      newMvList: []
    }
  },
  created () {
    getBannerImg().then(res => {
      if (!res || res.code !== 200) { return this.$message.error('请求失败!') }
      this.banner = res.banners
    })
    getRecommend().then(res => {
      if (!res || res.code !== 200) { return this.$message.error('请求失败!') }
      this.personalized = res.result
    })
    getNewSongList().then(res => {
      if (!res || res.code !== 200) { return this.$message.error('请求失败!') }
      this.newSongList = res.result
    })
    getNewMvList().then(res => {
      if (!res || res.code !== 200) { return this.$message.error('请求失败!') }
      this.newMvList = res.result
    })
  },
  mounted () {

  },
  methods: {

  }
}
</script>
 <style lang='less' scoped>
.discovery {
  .title-wrap {
    font-size: 0.131772rem;
    padding: 0.087848rem 0;
  }
  .banner-box {
    margin: auto;
    .carousel-img {
      height: 100%;
    }
  }
  /deep/ .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  /deep/ .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  /deep/ .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }

  .recommend {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .song-list-wrap {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: 20% 20% 20% 20% 20%;
    grid-template-columns: 50% 50%;
  }

  .mv-list-wrap {
    display: flex;
    justify-content: space-between;
  }
}
</style>
